DeepWiki

02 - User-Journey

Relevant source files

This document walks through the complete customer experience in the godeep.wiki system, from initial landing page visit to receiving the final documentation. It covers the three main user-facing pages, the data flow mechanisms that link payment to repository access, and the behind-the-scenes automation that processes customer requests.

For technical details about specific components referenced in this journey:

The user journey consists of three sequential phases: payment, GitHub connection, and confirmation. Each phase is implemented as a separate Next.js page with specific responsibilities for capturing and forwarding correlation data.

Sources: app/page.tsx L1-L213

app/success/page.tsx L1-L72

app/thank-you/page.tsx L1-L49

CLAUDE.md L30-L76

Phase 1: Landing Page & PaymentLink copied!

Landing Page ComponentsLink copied!

The landing page (app/page.tsx

) serves as the entry point and conversion funnel. It is implemented as a single server component with no client-side state management.

ComponentPurposeLocation
Hero SectionDisplays value proposition and primary CTAapp/page.tsx L32-L69
BeamButtonAnimated payment buttoncomponents/beam-button.tsx L10-L25
SpotlightCardInteractive feature cardscomponents/spotlight-card.tsx L10-L67
IconGlowHover-animated icon containerscomponents/icon-glow.tsx L10-L19

The payment button triggers a server action that creates a Stripe checkout session:

Key Implementation Details:

  1. Form Submission: The landing page uses Next.js server action syntax with <form action={createCheckoutSession}> at app/page.tsx L62-L66
  2. Product Configuration: Fixed $10 price for "DeepWiki Analysis" product at app/actions.ts
  3. Success URL Template: Embeds {CHECKOUT_SESSION_ID} placeholder which Stripe replaces with actual session_id
  4. No Client JavaScript: Payment initiation works without JavaScript (progressive enhancement)

Sources: app/page.tsx L1-L213

components/beam-button.tsx L1-L26

components/spotlight-card.tsx L1-L68

components/icon-glow.tsx L1-L20

Phase 2: Success Page & GitHub ConnectionLink copied!

Success Page ResponsibilitiesLink copied!

The success page (app/success/page.tsx

) is the critical linking mechanism between payment and repository access. It receives the session_id from Stripe and embeds it in the GitHub OAuth flow.

Success Page URL ParametersLink copied!

ParameterSourcePurposeRequired
session_idStripe redirectLinks payment to installationYes
errorOAuth callback redirectDisplays error messagesNo

Sources: app/success/page.tsx L10-L71

The "Connect GitHub" button initiates a multi-step OAuth and App installation flow:

Critical Security Features:

  1. State Token: CSRF protection via crypto.randomUUID() stored in github_oauth_state cookie
  2. HTTP-Only Cookies: Token theft prevention - cookies not accessible via JavaScript
  3. Secure Flag: Production-only flag ensures cookies only sent over HTTPS
  4. 1-Hour Expiry: Limits replay attack window

Repository Selection Warning:

The success page displays a prominent amber alert (app/success/page.tsx L38-L40

) instructing users to select "Only select repositories" during GitHub App installation. This is a critical security recommendation that limits the scope of repository access granted to the app.

The page also embeds a 15-second instructional video (app/success/page.tsx L44-L53

) hosted at https://cdn.vibecoders.school/assets/godeep-wiki.webm that demonstrates the repository selection process.

Sources: app/success/page.tsx L1-L72

CLAUDE.md L54-L76

Phase 3: Thank You Page & Delivery ExpectationsLink copied!

Thank You Page StructureLink copied!

After successful GitHub connection, users are redirected to the thank you page (app/thank-you/page.tsx

) which serves three purposes:

  1. Confirmation: Visual feedback that setup is complete
  2. Expectation Setting: Clear delivery timeline (1-9 hours)
  3. Exit Navigation: Return to homepage option

The thank you page presents delivery expectations in a structured blue info box (app/thank-you/page.tsx L20-L30

):

ElementContentPurpose
IconMail iconVisual indicator
Heading"What happens next?"Section title
Email Addressnoreply@godeep.wikiSender identification
Delivery FormatZIP fileFile format expectation
Timeline1-9 hoursProcessing time window

Auto-Redirect Behavior:

The RedirectTimer component (app/success/RedirectTimer.tsx L1-L23

) implements a 10-second countdown that automatically redirects users to the homepage. This is implemented using:

  • useEffect hook with setTimeout()
  • Router navigation via useRouter().push("/")
  • Cleanup function to clear timer on component unmount
  • Visual countdown text: "Redirecting to home in 10 seconds..."

Sources: app/thank-you/page.tsx L1-L49

app/success/RedirectTimer.tsx L1-L23

Post-Connection Event FlowLink copied!

After the user completes the visible journey, several automated processes trigger in parallel. These are invisible to the user but critical for delivering the final documentation.

The system uses cookies to link the Stripe session_id to the GitHub installation_id:

StageData AvailableStorage Mechanism
Success Pagesession_id (from URL)None - passed in OAuth URL
OAuth Initiationsession_id (from query param)Stored in stripe_session_id cookie
OAuth Callbackinstallation_id (from GitHub)Retrieved from stripe_session_id cookie
Logged Datasession_id + installation_idVercel logs (permanent record)

Cookie Flow Detail:

  1. Set Cookie: api/auth/github receives ?session_id=cs_xxx and stores it in stripe_session_id cookie with 1-hour expiry
  2. State Preserved: Browser maintains both stripe_session_id and github_oauth_state cookies during GitHub redirect
  3. Retrieve Cookie: api/auth/github/callback reads stripe_session_id cookie to correlate payment with installation
  4. Log Complete Record: Callback logs combined data: session_id, installation_id, username, email, timestamp

Sources: CLAUDE.md L44-L50

CLAUDE.md L54-L76

ComponentDurationPurpose
OAuth State Cookie1 hourCSRF protection validity window
Session ID Cookie1 hourPayment-to-installation link validity
Thank You Auto-Redirect10 secondsUser navigation convenience

Sources: app/page.tsx L1-L213

app/success/page.tsx L1-L72

app/thank-you/page.tsx L1-L49

app/success/RedirectTimer.tsx L1-L23

CLAUDE.md L30-L50

The success page can display error states if the OAuth flow fails:

Error Types:

  • access_denied: User declined GitHub App installation
  • Generic errors: Catch-all for other OAuth failures

Error display logic at app/success/page.tsx L31-L35

checks for error URL parameter and shows contextual messages.

If a user navigates directly to /success without a session_id, the page immediately redirects to the homepage (app/success/page.tsx L17-L19

):

if (!session_id) {  redirect("/")}

This prevents incomplete flows and ensures users always follow the payment → GitHub connection → confirmation path.

Sources: app/success/page.tsx L10-L72

CLAUDE.md L36-L42

Refresh this wiki

Last indexed: 23 November 2025 (922b35)

On this page

Ask Devin about godeep.wiki-jb

02 - User-Journey | DeepWiki | godeep.wiki